<template>
	<view class="index-content">
		<scroll-view style="margin-bottom: 70px;">
			<view class="info-content">
				<view class="content-top">
					<view class="content-top-title">作业单</view>
					<view class="content-middle-title">
						<view class="content-middle-title-info">
							<view class="content-middle-title-info-left">任务单编号</view>
							<view class="content-middle-title-info-right">{{labelObject.taskNo}}</view>
						</view>
						<view class="content-middle-title-info">
							<view class="content-middle-title-info-left">货物名称</view>
							<view class="content-middle-title-info-right">{{labelObject.materalName}}</view>
						</view>
						<view class="content-middle-title-info">
							<view class="content-middle-title-info-left">数量</view>
							<view class="content-middle-title-info-right">{{labelObject.qty}}</view>
						</view>
						<view class="content-middle-title-info">
							<view class="content-middle-title-info-left">重量</view>
							<view class="content-middle-title-info-right">{{labelObject.wgt}}</view>
						</view>
					</view>
					<view class="content-middle-title-one">
						<view class="content-middle-title-info">
							<view class="content-middle-title-info-left">客户编号</view>
							<view class="content-middle-title-info-right">{{labelObject.custormerId}}</view>
						</view>
						<view class="content-middle-title-info">
							<view class="content-middle-title-info-left">客户名称</view>
							<view class="content-middle-title-info-right">{{labelObject.custormerName}}</view>
						</view>
					</view>
				</view>
				<view class="content-top">
					<view class="content-middle-info">
						<view class="content-top-title">货区详情</view>
						<view style="color: #4899F3;" @click="handleResetStatus()" v-if="bizType == '30'">
							<view class="start-info">
								<div>{{status}}</div>
								<div style="width: 20px;height: 20px;">
									<image src="../../../static/select.png" style="width: 100%;height: 100%;"></image>
								</div>
							</view>
						</view>
					</view>
					<view class="content-middle-title-two">
						<view class="content-middle-title-info">
							<view class="content-middle-title-info-left-text">{{locationNo}}</view>
						</view>
					</view>
					<view class="content-middle-title-bottom">
						<view>
							标签
						</view>
						<view>
							当前操作
						</view>
					</view>
					<!--绑定 -->
					<div v-if="bizType == '10'">
						<view class="content-middle-title-bottom-border" v-for="(item, index) in dataList" :key="index">
							<view class="content-middle-title-bottom">
								<view class="content-bottom-text-left">
									<div class="start-info">
										<div style="width: 20px;height: 20px;margin-right: 8px;"
											@click="handleDel(index)">
											<image src="../../../static/del.png" style="width: 100%;height: 100%;">
											</image>
										</div>
										<view>
											标签{{item}}
										</view>
									</div>
								</view>
								<view class="content-bottom-text-right-one">
									绑定
								</view>
							</view>
						</view>
						<view class="reset-info" v-if="dataList && dataList.length > 0">
							<div class="start-info">
								<div style="width: 20px;height: 20px;margin-right: 8px;" @click="handleDelAll()">
									<image src="../../../static/reset.png" style="width: 100%;height: 100%;"></image>
								</div>
								<view>
									重置
								</view>
							</div>
						</view>
					</div>
					<!--解绑 -->
					<div v-if="bizType == '20'">
						<view class="content-middle-title-bottom-border" v-for="(item, index) in dataList" :key="index">
							<view class="content-middle-title-bottom">
								<view class="content-bottom-text-left">
									<div class="start-info">
										<view>
											标签{{item}}
										</view>
									</div>
								</view>
								<view class="content-bottom-text-right">
									解绑
								</view>
							</view>
						</view>
					</div>
					<!--调整标签 -->
					<div v-if="bizType == '30'">
						<view class="content-middle-title-bottom-border" v-for="(item, index) in dataList" :key="index">
							<view class="content-middle-title-bottom">
								<view class="content-bottom-text-left">
									<div class="start-info">
										<view>
											标签{{item}}
										</view>
									</div>
								</view>
								<view class="content-bottom-text-right-two">
									调整标签
								</view>
							</view>
						</view>
						<view class="content-middle-title-bottom-border" v-for="(item, ind) in dataListOne" :key="ind">
							<view class="content-middle-title-bottom">
								<view class="content-bottom-text-left">
									<div class="start-info">
										<div style="width: 20px;height: 20px;margin-right: 8px;"
											@click="handleDelOne(ind)">
											<image src="../../../static/del.png" style="width: 100%;height: 100%;">
											</image>
										</div>
										<view>
											标签{{item}}
										</view>
									</div>
								</view>
								<view class="content-bottom-text-right-one">
									绑定
								</view>
							</view>
						</view>
						<view class="content-middle-title-bottom-border" v-for="(item, index) in dataListTwo"
							:key="index">
							<view class="content-middle-title-bottom">
								<view class="content-bottom-text-left">
									<div class="start-info">
										<div style="width: 20px;height: 20px;margin-right: 8px;"
											@click="handleDelTwo(index)">
											<image src="../../../static/del.png" style="width: 100%;height: 100%;">
											</image>
										</div>
										<view>
											标签{{item}}
										</view>
									</div>
								</view>
								<view class="content-bottom-text-right">
									解绑
								</view>
							</view>
						</view>
						<view class="reset-info" v-if="dataListOne.length > 0 || dataListTwo.length >0">
							<div class="start-info">
								<div style="width: 20px;height: 20px;margin-right: 8px;" @click="handleDelAllOne()">
									<image src="../../../static/reset.png" style="width: 100%;height: 100%;"></image>
								</div>
								<view>
									重置
								</view>
							</div>
						</view>
					</div>
					<!--调整标签组 -->
					<div v-if="bizType == '40'">
						<view class="content-middle-title-bottom-border" v-for="(item, index) in dataList" :key="index">
							<view class="content-middle-title-bottom">
								<view class="content-bottom-text-left">
									<div class="start-info">
										<view>
											标签{{item}}
										</view>
									</div>
								</view>
								<view class="content-bottom-text-right-three">
									调整标签组
								</view>
							</view>
						</view>
					</div>
				</view>
			</view>
		</scroll-view>
		<view class="btns-bottom-info">
			<view class="btns-bottom">
				<view style="width: 100%;margin-right: 10px;">
					<u-button type="success" :loading="fetching" @click="handleSave()">
						保存</u-button>
				</view>
			</view>
		</view>
		<u-action-sheet :list="listStatus" @click="clickStatus" v-model="showStatus"></u-action-sheet>
	</view>
</template>

<script>
	var main = null;
	var receiver = null;
	import {
		getTagGroup,
		handleTags,
		taskEnd
	} from '@/api/index.js';
	export default {
		data() {
			return {
				status: "绑定",
				bizType: '',
				locationNo: '',
				screenHeight: 0,
				fetching: false,
				showUnbind: false,
				showBind: false,
				showStatus: false,
				contentU: "确认进行扫描解绑？",
				contentB: "确认进行扫描绑定？",
				customStyleUnbind: {
					height: '40px',
					fontSize: '18px',
					background: '#F1A35F',
					color: '#ffffff',
					borderRadius: '4px'
				},
				customStyleBind: {
					height: '40px',
					fontSize: '18px',
					background: '#5AC0BE',
					color: '#ffffff',
					borderRadius: '4px'
				},
				labelObject: {},
				groupNo: "",
				orgGroupNo: "",
				dataList: [],
				dataListOne: [],
				dataListTwo: [],
				stateList: [],
				listStatus: [{
					text: '绑定',
					color: '#171A1D',
					fontSize: 20,
				}, {
					text: '解绑',
					color: '#171A1D',
					fontSize: 20,
				}],
			}
		},
		onLoad(options) {
			if (options) {
				this.labelObject = JSON.parse(options.data);
				this.groupNo = this.labelObject.groupNo;
				this.orgGroupNo = this.labelObject.orgGroupNo;
				this.bizType = this.labelObject.bizType;
				if (this.bizType == "20" || this.bizType == "30") {
					this.getTagGroup(this.groupNo);
				} else if (this.bizType == "40") {
					this.getTagGroup(this.orgGroupNo);
				}
				this.initBroadcast();
			}
		},
		onBackPress(options) {
			if (this.bizType != "10") {
				this.endTask();
			}
		},
		methods: {
			handleDel(index) {
				this.dataList.splice(index, 1);
			},
			handleDelTwo() {
				this.dataListTwo.splice(index, 1);
			},
			handleDelAll() {
				this.dataList = [];
			},
			handleDelOne(index) {
				this.dataListOne.splice(index, 1);
			},
			handleDelAllOne() {
				this.dataListOne = [];
				this.dataListTwo = [];
			},
			clickStatus(index) {
				this.status = this.listStatus[index].text;
			},
			handleResetStatus() {
				this.showStatus = true;
			},
			endTask() {
				taskEnd({
					tagGroupNo: this.orgGroupNo,
					userName: uni.getStorageSync('userName')
				}).then((res) => {
					if (res && res.code == "501") {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			initBroadcast() {
				let _this = this;
				main = plus.android.runtimeMainActivity(); //获取activity
				//创建自定义广播实例  
				receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
					onReceive: function(context, intent) { //实现onReceiver回调函数  
						plus.android.importClass(intent);
						var action = intent.getAction();
						if (action == 'com.scanner.broadcast') {
							//二维码
							var data = intent.getExtra("data");
							if (data) {
								_this.receviceMessage = data.replace(/\n/, '');
								if (_this.bizType == '10') {
									if (_this.receviceMessage) {
										_this.dataList.push(_this.receviceMessage);
										// Set()去自动去除重复项
										_this.dataList = [...new Set(_this.dataList)]
									}
								} else if (_this.bizType == '30') {
									if (_this.status == "绑定") {
										if (_this.receviceMessage) {
											_this.dataListOne.push(_this.receviceMessage);
											// Set()去自动去除重复项
											_this.dataListOne = [...new Set(_this.dataListOne)]
										}
									} else {
										if (_this.receviceMessage) {
											_this.dataListTwo.push(_this.receviceMessage);
											// Set()去自动去除重复项
											_this.dataListTwo = [...new Set(_this.dataListTwo)]
										}
									}

								}
								success({
									type: 'barcode',
									data: data.replace(/\n/, '').replace(/\t/, '').trim()
								})
							} else {
								fail('未识别到扫码数据');
							}
						}
					}
				});
				var IntentFilter = plus.android.importClass('android.content.IntentFilter'); //网络
				var Intent = plus.android.importClass('android.content.Intent');
				var filter = new IntentFilter(); //过滤
				filter.addAction(Intent.ACTION_AIRPLANE_MODE_CHANGED); //监听飞行模式 
				filter.addAction("android.intent.action.scanner.RFID"); //监听rfid
				filter.addAction("com.scanner.broadcast"); //监听bar
				var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter"); //蓝牙
				var BAdapter = new BluetoothAdapter.getDefaultAdapter();
				filter.addAction(BAdapter.ACTION_STATE_CHANGED); //监听蓝牙
				main.registerReceiver(receiver, filter); //注册监听
			},
			getTagGroup(num) {
				getTagGroup({
					tagGroupNo: num,
					account: uni.getStorageSync('account'),
					userName: uni.getStorageSync('userName')
				}).then((res) => {
					if (res && res.code == "200") {
						this.dataList = res.data.dataList;
						if (this.bizType == "40") {
							this.locationNo = this.labelObject.storeName;
						} else {
							this.locationNo = this.labelObject.orgStoreName;
						}
					} else if (res && res.code == "501") {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 保存
			handleTags(data) {
				let params = {};
				// 提交数据
				if (this.fetching) {
					return false;
				}
				this.fetching = true;
				// 显示loading状态
				uni.showLoading({
					mark: true,
					title: "保存中..."
				})
				if (this.bizType == "10") {
					params = {
						task: this.labelObject,
						delTagNos: [],
						addTagNos: data,
						account: uni.getStorageSync('account'),
						userName: uni.getStorageSync('userName')
					}
				} else if (this.bizType == "20") {
					params = {
						task: this.labelObject,
						delTagNos: data,
						addTagNos: [],
						account: uni.getStorageSync('account'),
						userName: uni.getStorageSync('userName')
					}
				} else if (this.bizType == "30") {
					params = {
						task: this.labelObject,
						delTagNos: this.dataListTwo, // 解绑
						addTagNos: this.dataListOne, // 绑定
						account: uni.getStorageSync('account'),
						userName: uni.getStorageSync('userName')
					}
				} else if (this.bizType == "40") {
					params = {
						task: this.labelObject,
						delTagNos: data,
						addTagNos: data,
						account: uni.getStorageSync('account'),
						userName: uni.getStorageSync('userName')
					}
				}
				handleTags(params).then((res) => {
					if (res && res.code == "200") {
						this.fetching = false;
						uni.hideLoading();
						uni.navigateBack();
						uni.showToast({
							title: "保存成功",
							icon: 'none',
							duration: 3000
						})
					} else if (res && res.code == "501") {
						this.fetching = false;
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			handleSave() {
				this.handleTags(this.dataList);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F4;
		font-size: 18px;
	}

	.start-info {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.reset-info {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		color: #4899F3;
		padding: 20px 0 15px 0;
	}

	.index-content {
		width: 100%;
		height: 200px;
		background-image: linear-gradient(180deg, #4899F3 0%, rgba(72, 153, 243, 0.00) 100%);
	}

	.info-content {
		padding: 10px;
	}

	.content-top {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.content-top-title {
		font-size: 16px;
		color: #171A1D;
		line-height: 18px;
		font-weight: bold;
	}

	.content-middle-title {
		margin-top: 10px;
		padding: 8px 0;
		border-bottom: 1px solid #EEF0F4;
	}

	.content-middle-title-one {
		padding: 8px 0;
	}

	.content-middle-title-two {
		padding: 8px 0;
	}

	.content-middle-title-info {
		display: flex;
		padding: 10px 0;
	}

	.content-middle-title-info-left {
		font-size: 14px;
		color: rgba(23, 26, 29, 0.60);
		padding-right: 30px;
	}

	.content-middle-title-info-left-text {
		font-size: 18px;
		color: #171A1D;
	}

	.content-middle-title-info-right {
		font-size: 14px;
		color: #171A1D;
	}

	.content-middle-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content-middle-title-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		color: rgba(23, 26, 29, 0.40);
		padding-bottom: 15px;
	}

	.content-middle-title-bottom-border {
		margin-top: 20px;
		padding: 8px 0;
		border-bottom: 1px solid #EEF0F4;
	}

	.content-bottom-text-left {
		font-size: 16px;
		color: #171A1D;
	}

	.content-bottom-text-right {
		font-size: 16px;
		position: relative;
		color: rgba(23, 26, 29, 0.60);

		&::after {
			content: '';
			top: 8px;
			position: absolute;
			left: -18px;
			width: 10px;
			height: 10px;
			background: #FF9200;
			border-radius: 50%;
		}
	}

	.content-bottom-text-right-one {
		font-size: 16px;
		position: relative;
		color: rgba(23, 26, 29, 0.60);

		&::after {
			content: '';
			top: 8px;
			position: absolute;
			left: -18px;
			width: 10px;
			height: 10px;
			background: #00B042;
			border-radius: 50%;
		}
	}

	.content-bottom-text-right-two {
		font-size: 16px;
		position: relative;
		color: rgba(23, 26, 29, 0.60);

		&::after {
			content: '';
			top: 8px;
			position: absolute;
			left: -18px;
			width: 10px;
			height: 10px;
			background: #4899F3;
			border-radius: 50%;
		}
	}

	.content-bottom-text-right-three {
		font-size: 16px;
		position: relative;
		color: rgba(23, 26, 29, 0.60);

		&::after {
			content: '';
			top: 8px;
			position: absolute;
			left: -18px;
			width: 10px;
			height: 10px;
			background: #5660BC;
			border-radius: 50%;
		}
	}

	.btns-bottom-info {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
	}

	.btns-bottom {
		padding: 20px;
		display: flex;
	}
</style>
